<template>
  <div class="toolbar">
    <div class="leftBtn">
      <el-tooltip v-for="item in btnList" :key="item.icon" :content="item.name" placement="top">
        <el-button size="mini" type="text" @click="btnClick(item.type)" :disabled="isDisabled(item)">
          <i :class="[item.icon, 'iconfont']"></i>
        </el-button>
      </el-tooltip>
    </div>
    <div class="rightBtn">
      <el-button size="mini" type="success" plain @click="saveClick" :disabled="!isDisabledBtn.canSave">保存</el-button>
    </div>
  </div>
</template>

<script>
import { btnList } from '../data'
export default {
  name: '',
  props: {
    isDisabledBtn: {
      type: Object,
      default: () => ({
        canUndo: false,
        canRedo: false,
        canDel: false,
        canSave: false
      })
    }
  },
  data() {
    return {
      btnList
    }
  },
  methods: {
    btnClick(type) {
      this.$emit(type)
    },
    saveClick() {
      this.$emit('saveClick')
    },
    isDisabled(item) {
      return !item.btnDisabled ? item.btnDisabled : !this.isDisabledBtn[item.btnDisabled]
    }
  }
}
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 3px #e9e9e9;
  border-bottom: solid 1px #eee;
  padding: 5px 10px;
  display: flex;
  .leftBtn {
    display: flex;
    font-size: 12px;
    button {
      &:nth-child(2),
      &:nth-child(4),
      &:nth-child(6) {
        i {
          border-right: solid 1px #d5d5d5;
          padding-right: 10px;
        }
      }
    }
  }
  .rightBtn {
    margin-left: auto;
  }
}
.el-button--text {
  color: #333;
}
.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:focus {
  color: #c0c4cc;
}
</style>